/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import {
  Form,
  Input,
  InputNumber,
  Radio,
  TreeSelect,
  Select,
  Collapse,
  Button,
  message,
  Card,
  Result,
  Row,
  Col,
  Steps,
  Typography
} from 'antd';
import {connect} from 'dva';
import './index.less'
import request from '@/utils/request';
import find from 'lodash/find'
import {printUtils} from '@/utils/utils';
const { Paragraph } = Typography;
const FormItem = Form.Item;
const { Step } = Steps;
const Option = Select.Option;

@connect(({ owner}) => ({
  owner,
}))
@Form.create()
class EditUserArchives extends Component {
  constructor(props) {
    super(props);
    this.formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 6},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 18},
        sm: {span: 16},
      }
    };
    this.formItemLayoutWithLabel2 = {
      labelCol: {
        xs: {span: 6},
        sm: {span: 11},
      },
      wrapperCol: {
        xs: {span: 18},
        sm: {span: 13},
      }
    };
    this.state = {
      current:0,
      amount:0,
      remark:'',
      type:1,
        transaction_serial_number:'',
      payId:'',
      payObj:{},
      payType: [{key:1,value:'现金'},
        {key:2,value:'支票'},
        {key:3,value:'银行卡'},
        {key:4,value:'微信扫码'},
        {key:5,value:'支付宝扫码'},
        {key:6,value:'网银'},
        {key:7,value:'网银2'},
        {key:30,value:'补水'},
      ],
      loading:false
    };
  }
  componentDidMount() {
    console.log(this.props)
  }
  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }
  pay=()=>{
    const that=this;
    const {getFieldValue}=this.props.form
    that.setState({
      loading:true
    })
    request(`/payments`,{
      method:'POST',
      data:{
        account_id:this.props.editRecord.id,
        amount:this.state.amount,
        transaction_serial_number:this.state.transaction_serial_number,
        remark:this.state.remark,
        type:this.state.type
      }
    }).then((response)=>{
      if(response.status===200){
        this.next();
        this.setState({
          payObj:response.data.data,
          payId:response.data.data.id,
          loading:false
        })
        const {
          owner: { searchParams },
        } = that.props;
        that.props.handleSearch(searchParams);
      }
    });

    setTimeout(function() {
      that.setState({
        loading:false
      })
    },5000)

  }
  print=()=>{

    console.log(this.state.payId)
    request(`/print/payments/${this.state.payId}`,{
      method:'POST',
    }).then((response)=>{
      if(response.status===200){
        printUtils(response.data.data);
      }

    });
  }
  renderInfo=()=>{
    const { getFieldDecorator, validateFields } = this.props.form;
    return    <Form onSubmit={this.handleSubmit}>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主姓名'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
        <span title={this.props.editRecord.name}>{this.props.editRecord.name}</span>
        </Paragraph>
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主编号'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.number}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主手机'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.mobile}

      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主地址'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
          <span title={this.props.editRecord.address}>{this.props.editRecord.address}</span>
        </Paragraph>
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'水表编号'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.meter_number}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'用水性质'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.name}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'一阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_one_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'一阶水量'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_one_consumption}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'二阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_two_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'二阶水量'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_two_consumption}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'三阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_three_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'污水处理费'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.sewage_fee}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'余额'}
        {...this.formItemLayoutWithLabel}
      >
        <span
          style={{padding:'5px'}}
          className={Number(this.props.editRecord.balance) > Number(this.props.editRecord.balance_alarm_amount) ? 'table-success table-status' :
            Number(this.props.editRecord.balance) > 0?'table-warm table-status':'table-error table-status'}>{this.props.editRecord.balance}</span>
      </FormItem>
      <FormItem
        label={'备注'}
        {...this.formItemLayoutWithLabel2}
      >
        {getFieldDecorator('remark', {
          initialValue: this.state.remark,
        })(
          <Input    AUTOCOMPLETE="off" style={{width:'150px'}} onChange={(e)=>{
            this.setState({
              remark:e.target.value
            })
          }}  />
        )}
      </FormItem>
      <FormItem
        label={'充值方式'}
        {...this.formItemLayoutWithLabel2}
      >
        {getFieldDecorator('type', {
          initialValue: this.state.type,
          rules: [
            { required: true, message: '请选择充值方式' }
          ],
        })(
          <Select  onChange={(e)=>{
            this.setState({
              type:e
            })
          }}  style={{width:'150px'}}>
            { this.state.payType.map(item => <Option key={item.key} value={item.key}>{item.value}</Option>) }
          </Select>
        )}
      </FormItem>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="充值金额">
        {getFieldDecorator('amount', {
          initialValue: this.state.amount,
          rules: [
            { required: true, message: '请输入转账金额' },
            {
              pattern: /^(\d+)((?:\.\d+)?)$/,
              message: '请输入合法金额数字',
            },
          ],
        })(<Input    AUTOCOMPLETE="off" style={{width:'150px'}} onChange={(e)=>{
          this.setState({
            amount:e.target.value
          })
        }} prefix="￥" placeholder="请输入金额" />)}
      </Form.Item>
      {
        (Number(this.state.type)===6||Number(this.state.type)===7)&&
        <FormItem
          label={'网银流水号'}
          {...this.formItemLayoutWithLabel2}
        >
          {getFieldDecorator('transaction_serial_number', {
            initialValue: this.state.transaction_serial_number,
            rules: [
              { required: true, message: '请选择充值方式' }
            ],
          })(
            <Input    AUTOCOMPLETE="off" style={{width:'150px'}} onChange={(e)=>{
              this.setState({
                transaction_serial_number:e.target.value
              })
            }}  />
          )}
        </FormItem>
      }
    </Form>
  }

  renderInfo2=()=>{
    const { getFieldDecorator, validateFields } = this.props.form;
    const that=this;
    return    <Form onSubmit={this.handleSubmit}>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主姓名'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
          <span title={this.props.editRecord.name}>{this.props.editRecord.name}</span>
        </Paragraph>
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主编号'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.number}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主手机'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.mobile}

      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主地址'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
          <span title={this.props.editRecord.address}>{this.props.editRecord.address}</span>
        </Paragraph>
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'水表编号'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.meter_number}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'用水性质'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.name}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'一阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_one_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'一阶水量'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_one_consumption}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'二阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_two_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'二阶水量'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_two_consumption}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'三阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_three_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'污水处理费'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.sewage_fee}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'余额'}
        {...this.formItemLayoutWithLabel}
      >
        <span
          style={{padding:'5px'}}
          className={Number(this.props.editRecord.balance) > Number(this.props.editRecord.balance_alarm_amount) ? 'table-success table-status' :
            Number(this.props.editRecord.balance) > 0?'table-warm table-status':'table-error table-status'}>{this.props.editRecord.balance}</span>
      </FormItem>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="备注">
        {this.state.remark}
      </Form.Item>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="充值方式">
        <h3>{
          find(this.state.payType,function(o) {
            return o.key===that.state.type
          }).value
        }</h3>
      </Form.Item>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="充值金额">
        <h1 style={{color:'#00b317',top:'-5px',position:'relative'}}>￥{this.state.amount}</h1>
      </Form.Item>
      {
        (Number(this.state.type)===6||Number(this.state.type)===7)&&
        <FormItem
          label={'网银流水号'}
          {...this.formItemLayoutWithLabel2}
        >
          {this.state.transaction_serial_number}
        </FormItem>
      }
    </Form>
  }
  renderInfo3=()=>{
    return   <Result
      status="success"
      title="充值成功"
      subTitle="点击下方按钮打印账单"
    />
  }
  render() {

    const steps = [
      {
        title: '填写充值金额',
        content: this.renderInfo(),
      },
      {
        title: '提交充值金额',
        content: this.renderInfo2()
      },
      {
        title: '打印账单',
        content: this.renderInfo3(),
      },
    ];
    const { current } = this.state;
    return (
      <div>
        <Steps current={current}>
          {steps.map(item => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>
        <div className="steps-content">{steps[current].content}</div>
        <div className="steps-action" style={{textAlign:'center',marginTop:'10px'}}>

          {current === 0 && (
            <Button type="primary" onClick={() => {
              if(!Boolean(Number(this.state.amount))){
                message.error('请输入金额')
                return false
              }
              this.next()
            }}>
              下一步
            </Button>
          )}
          {current === 1 && (
            <Fragment>
              <Button  onClick={() => this.prev()}>
                上一步
              </Button>
              <Button type="primary"  loading={this.state.loading} style={{marginLeft:'10px'}} onClick={this.pay}>
                提交
              </Button>
            </Fragment>

          )}
          {current ===2 && (
            <Button style={{ marginLeft: 8 }} type="primary"  onClick={this.print}>
              打印账单
            </Button>
          )}
        </div>
      </div>
    );
  }
}

export default EditUserArchives;
